<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形图（集群图） - 带注释</title>
    <!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
    <script src="d3/d3.v3.min.js" charset="utf-8"></script>
    <style>
        svg{
            display: block;
            width: 1000px;
            height: 800px;
            margin: 100px auto;
        }
        path.link{
            stroke: #aaa;
            stroke-width: 1.5px;
            fill:transparent;
        }
        .node circle{
            fill:#fff;
            stroke:steelblue;
            stroke-width: 1.5px;
        }
    </style>
</head>
<body>
<!--数据一共3级-->
<svg></svg>
</body>
</html>
<script>

    var tree = d3.layout.tree()
        .size([600, 400])//设定尺寸，即转换后的各个节点的坐标在哪一个范围内；
        .separation(function (a, b) {//设置节点之间的间隔；
            return (a.parent == b.parent ? 1 : 2)
        });
    // 转换数据
    d3.json('flare.json',function (error,root) {//root是读入的数据；
        var nodes = tree.nodes(root);
        var links = tree.links(nodes);
        console.log(nodes)//nodes中有各个节点的子节点（children）,深度（depth),名称（name).位置（x,y)信息；其中name是json文件中的属性
        console.log(links)//links中有连线两端（source,target)的节点信息；
        // 绘制
        // d3.svg.diagonal()是一个对角线生成器，只要输入两个顶点坐标，即可生成一条贝塞尔曲线
        // 创建一个对角线生成器
        var diagonal = d3.svg.diagonal()
            .projection(function(d){return [d.y,d.x]})//projection()是一个点变换器，默认是【d.x,d.y】，即保持原坐标不变，如果写成 [ d.y , d.x ] ，即是说对任意输入的顶点，都交换 x 和 y 坐标。
        var svg = d3.select('svg')
            .append('g')//不加这个g的时候，中国两个字出不来；
            .attr("transform", "translate(140,0)");
        // 绘制连线方法
        var link = svg.selectAll('.link')
            .data(links)
            .enter()
            .append('path')
            .attr('class','link')
            .attr('d',diagonal)
        var node = svg.selectAll('.node')
            .data(nodes)
            .enter()
            .append('g')
            .attr('class','node')
            .attr('transform',function (d) {
                return "translate(" + d.y + "," + d.x + ")";
            })
        node.append('circle')
            .attr('r',5)
        node.append('text')
            .attr("dx", function(d) { return d.children ? -8 : 8; })
            .attr("dy", 3)
            .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
            
        node.select('text').append("a")
        	.attr('href',"https://www.baidu.com/")
        	.text(function(d) { return d.name; });
    })

</script>